<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- a标签默认就有点击事件的行为，他的行为就是跳转 -->
        <!-- 所以如果不想跳转，就要阻止事件的默认行为 -->
        <a @click="fn1" href="http://www.baidu.com">点我跳转</a>
        
        <!-- 上午我们讲过，绑定事件时，如果不要传参数就不要写小括号 -->
        <!-- 加小括号代表我要自己传递参数 -->
        <a @click="fn1(30)" href="http://www.baidu.com" target="_blank">点我跳转--加了小括号</a>

        <!-- 此时加了小括号，fn2的默认参数也不再是事件对象，而是undefined，因为什么都没传所以是undefined -->
        <a @click="fn2()" href="http://www.baidu.com" target="_blank">点我跳转--加了小括号</a>
        
        <!-- 
            结论：如果要拿事件对象,就不要加小括号，加了小括号代表你传什么参数形参就是什么
            反正只要加了小括号，默认参数都不再是事件对象了 
        -->

        <!-- 有没有一种可能。我既想传参，又想拿到事件对象，怎么办？ -->
        <!-- 就用 $event 代表事件对象，形参才能拿到事件对象  -->
        <a @click="fn3(30, $event)" href="http://www.baidu.com" target="_blank">点我跳转-传参并拿到事件对象</a>
      
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                // 如何获取事件对象？
                // 跟以前一样，在事件绑定的函数里写一个形参e，这个e就是事件对象
                fn1 (e) {
                    console.log(e) // 如果绑定fn1时没加小括号这里打印事件对象， 加了小括号打印30
                    e.preventDefault()
                    alert('a被点了')
                },

                fn2 (e) {
                    console.log(e) // undefined
                },

                fn3 (num1, e) {
                    console.log(num1, e) // 30  事件对象
                    alert(num1) // 30
                    e.preventDefault() // 阻止了跳转
                }
            }
        })
    </script>
</body>
</html>